<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册-demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <style type="text/css">
        html {
            overflow-y: scroll;
        }
        :root {
            overflow-y: auto;
            overflow-x: hidden;
        }
        :root body {
            position: absolute;
        }
        body {
            width: 100vw;
            overflow: hidden;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
<div th:include="layout/header :: header(user=${session.user},flag=${session.user}!=null,page='signup')"></div>

<main class="container" style="padding-top: 8%">
    <form class="col-6 mx-auto" role="form" action="#" th:action="@{register.do}" method="post">
        <div class="text-center mb-5">
            <h1>注 册</h1>
        </div>

        <div class="form-group mb-4 row">
            <div class="media col-2">
                <h6 class="align-self-center ml-auto">昵称</h6>
                <h6 class="text-danger">*</h6>
            </div>
            <div class="col-10">
                <label for="userName" class="sr-only">昵称</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">@</span>
                    </div>
                    <input type="text" name="userName" class="form-control" id="userName" required
                           data-toggle="tooltip" title="最多18个字符" data-placement="right" data-trigger="manual">
                </div>
            </div>
        </div>
        <div class="form-group mb-4 row">
            <div class="media col-2">
                <h6 class="align-self-center ml-auto">邮箱</h6>
            </div>
            <div class="col-10">
                <label for="email" class="sr-only">邮箱</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><span class="glyphicon glyphicon-envelope"></span></span>
                    </div>
                    <input type="text" name="email" class="form-control" id="email" onchange="emailVerify()"
                           data-toggle="tooltip" title="最多32个字符" data-placement="right" data-trigger="manual">
                </div>
            </div>
        </div>
        <div class="alert alert-danger col-10 ml-auto" hidden id="alertEmail"><span class="glyphicon glyphicon-info-sign"></span> 请输入正确的邮箱！</div>
        <div class="form-group mb-4 row">
            <div class="media col-2">
                <h6 class="align-self-center ml-auto">手机</h6>
            </div>
            <div class="col-10">
                <label for="phone" class="sr-only">手机</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><span class="glyphicon glyphicon-earphone"></span></span>
                    </div>
                    <input type="text" name="phone" class="form-control" id="phone" onchange="phoneVerify()"
                           data-toggle="tooltip" title="最多11位数字" data-placement="right" data-trigger="manual">
                </div>
            </div>
        </div>
        <div class="alert alert-danger col-10 ml-auto" hidden id="alertPhone"><span class="glyphicon glyphicon-info-sign"></span> 请输入正确的手机号！</div>
        <div class="form-group mb-4 row">
            <div class="media col-2">
                <h6 class="align-self-center ml-auto">用户名</h6>
                <h6 class="text-danger">*</h6>
            </div>
            <div class="col-10">
                <label for="userID" class="sr-only">用户名</label>
                <input type="text" name="userID" class="form-control" id="userID" required onchange="doVerify()"
                       data-toggle="tooltip" title="最多32个字符" data-placement="right" data-trigger="manual">
            </div>
        </div>
        <div class="alert alert-danger col-10 ml-auto" hidden id="alertId"><span class="glyphicon glyphicon-info-sign"></span> 用户名已被占用，请重新输入！</div>
        <div class="form-group mb-5 row">
            <div class="media col-2">
                <h6 class="align-self-center ml-auto">密码</h6>
                <h6 class="text-danger">*</h6>
            </div>
            <div class="col-10">
                <label for="password" class="sr-only">密码</label>
                <input type="password" name="password" class="form-control" id="password" required
                       data-toggle="tooltip" title="最多16个字符" data-placement="right" data-trigger="manual">
            </div>
        </div>
        <button id="submit" class="btn btn-lg btn-danger btn-block col-4 m-auto" type="submit">注 册</button>
    </form>
</main>

<div th:include="layout/footer :: Footer"></div>
<script type="text/javascript">

    var flag = [false, false, false];
    function justifySubmit() {
        console.log(flag);
        for(let i = 0; i < 3; i++){
            if(flag[i]){
                $("#submit").attr('disabled',true);
                return;
            }
        }
        $("#submit").attr('disabled',false);
    }
    function doVerify(){
        let account =  $("#userID").val();
        // console.log(account);
        if(account =="") {
            if (flag[0]) {
                $("#alertId").attr('hidden', 'hidden');
                flag[0] = false;
            }
            justifySubmit();
            return;
        }
        $.ajax({
            url:"checkUserID.do",
            dataType: "Json",
            type: "post",
            data:{
                userID:account
            },
            success: function(msg){
                if(!msg) {
                    // 账号已经存在
                    if(!flag[0]){
                        flag[0] = true;
                        $("#alertId").removeAttr('hidden');
                    }
                }
                else{
                    if(flag[0]){
                        flag[0] = false;
                        $("#alertId").attr('hidden', 'hidden');
                    }
                }
                justifySubmit();
            }
        });

    }
    function phoneVerify() {
        var phone =  $("#phone").val();
        if(phone =="") {
            if (flag[1]) {
                $("#alertPhone").attr('hidden', 'hidden');
                flag[1] = false;
            }
            justifySubmit();
            return;
        }
        var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!myreg.test(phone)) {
            if(!flag[1]){
                flag[1] = true;
                $("#alertPhone").removeAttr('hidden');
            }
        } else {
            if(flag[1]){
                flag[1] = false;
                $("#alertPhone").attr('hidden', 'hidden');
            }
        }
        justifySubmit();
    }
    function emailVerify(){

        var email = $("#email").val();
        if(email =="") {
            if (flag[2]) {
                $("#alertEmail").attr('hidden', 'hidden');
                flag[2] = false;
            }
            justifySubmit();
            return;
        }
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!reg.test(email)){
            if(!flag[2]){
                flag[2] = true;
                $("#alertEmail").removeAttr('hidden');
            }
        }else{
            if(flag[2]){
                flag[2] = false;
                $("#alertEmail").attr('hidden', 'hidden');
            }
        }
        justifySubmit();
    }
    $("#userName").keyup(function(){
        let len = $(this).val().length;
        if(len > 17){
            $(this).val($(this).val().substring(0,18));
            $(this).tooltip('show');
            setTimeout(function(){
                $("#userName").tooltip('hide');
             }, 2000);
        }
    });
    $("#email").keyup(function(){
        let len = $(this).val().length;
        if(len > 31){
            $(this).val($(this).val().substring(0,32));
            $(this).tooltip('show');
            setTimeout(function(){
                $("#email").tooltip('hide');
            }, 2000);
        }
    });
    $("#phone").keyup(function(){
        let len = $(this).val().length;
        if(len > 10){
            $(this).val($(this).val().substring(0,11));
            $(this).tooltip('show');
            setTimeout(function(){
                $("#phone").tooltip('hide');
            }, 2000);
        }
    });
    $("#userID").keyup(function(){
        let len = $(this).val().length;
        if(len > 31){
            $(this).val($(this).val().substring(0,32));
            $(this).tooltip('show');
            setTimeout(function(){
                $("#userID").tooltip('hide');
            }, 2000);
        }
    });
    $("#password").keyup(function(){
        let len = $(this).val().length;
        if(len > 15){
            $(this).val($(this).val().substring(0,16));
            $(this).tooltip('show');
            setTimeout(function(){
                $("#password").tooltip('hide');
            }, 2000);
        }
    });

    $("form").submit(function () {
        alert("注册成功，请登录！");
    });

</script>

</body>
</html>